<template>
  <div class="app-container">
    <!--数据搜索-->
    <el-form size="mini" :inline="true" :model="searchForm">
      <el-form-item>
        <el-input v-model="searchForm.username" placeholder="账号" @keyup.enter.native="searchUserHandle"/>
      </el-form-item>
      <el-form-item>
        <el-input v-model="searchForm.email" placeholder="邮箱" @keyup.enter.native="searchUserHandle"/>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" icon="el-icon-search" :loading="searchLoading" @click="searchUserHandle">查询
        </el-button>
      </el-form-item>
      <el-form-item>
        <el-button type="success" icon="el-icon-plus" @click="insertHandle()">添加</el-button>
      </el-form-item>
      <el-form-item>
        <el-button type="danger" icon="el-icon-delete" @click="deleteHandle()" :disabled="multipleSelection.length === 0">
          删除
        </el-button>
      </el-form-item>
    </el-form>
    <!--数据表格-->
    <el-table element-loading-text="加载中，请稍后..." size="mini" border v-loading="listLoading" fit highlight-current-row :data="userList" @selection-change="selectionChangeHandle">
      <!--展开行-->
      <el-table-column type="expand">
        <template slot-scope="props">
          <el-form label-position="left" inline class="table-expand">
            <el-form-item label="账号">
              <span> {{ props.row.username }} </span>
            </el-form-item>
            <el-form-item label="手机">
              <span> {{ props.row.phone }} </span>
            </el-form-item>
            <el-form-item label="邮箱">
              <span> {{ props.row.email }} </span>
            </el-form-item>
            <el-form-item label="角色">
              <el-tag size="mini" effect="dark" style="margin-right: 2px" :type="role | roleTypeFilter" :key="role.id" v-for="role in props.row.roleNames">
                {{role}}
              </el-tag>
            </el-form-item>
            <el-form-item label="创建时间">
              <span> {{ props.row.createTime }} </span>
            </el-form-item>
            <el-form-item label="更新时间">
              <span> {{ props.row.updateTime }} </span>
            </el-form-item>
          </el-form>
        </template>
      </el-table-column>
      <!--列表-->
      <el-table-column prop="id" type="selection" fixed/>
      <el-table-column label="账号" prop="username"/>
      <el-table-column label="手机" prop="phone"/>
      <el-table-column label="邮箱" prop="email"/>
      <el-table-column label="状态" align="center" width="70">
        <template slot-scope="scope">
          <el-tag size="mini" :type="scope.row.status | statusFilter"> {{ scope.row.status | statusTextFilter }}
          </el-tag>
        </template>
      </el-table-column>
      <el-table-column label="头像" align="center">
        <template slot-scope="scope">
          <el-avatar :size="25" :src="scope.row.avatar"/>
        </template>
      </el-table-column>
      <el-table-column label="创建时间" align="center" width="150">
        <template slot-scope="scope">
          <i class="el-icon-time"/>
          <span> {{ scope.row.createTime }} </span>
        </template>
      </el-table-column>
      <el-table-column label="操作" fixed="right" align="center" width="150">
        <template slot-scope="scope">
          <el-button type="primary" size="mini" @click="updateHandle(scope.row)">编辑</el-button>
          <el-button type="danger" size="mini" @click="deleteHandle(scope.row)">删除</el-button>
        </template>
      </el-table-column>
    </el-table>
    <!-- 分页 -->
    <el-pagination
      background
      @size-change="handleSizeChange"
      @current-change="handleCurrentChange"
      :current-page="searchForm.currentPage"
      :page-sizes="[3, 20, 30, 50, 100, 200, 300, 400]"
      :page-size="20"
      layout="total, sizes, prev, pager, next, jumper"
      :total="searchForm.total">
    </el-pagination>
    <!-- 添加用户 -->
    <user-insert :visible.sync="insertVisible" @reloadTable="searchUserHandle"/>
    <!-- 更新用户 -->
    <user-update :visible.sync="updateVisible" :user-id="userId" @reloadTable="searchUserHandle"/>
  </div>
</template>

<script>
  import UserInsert from './components/user-insert'
  import UserUpdate from './components/user-update'

  export default {
    components: {
      'user-insert': UserInsert,
      'user-update': UserUpdate
    },
    filters: {
      statusFilter(status) {
        const statusMap = { 0: 'success', 1: 'gray', 2: 'danger' }
        return statusMap[status]
      },
      statusTextFilter(status) {
        const statusTextMap = { 0: '正常', 1: '冻结', 2: '删除' }
        return statusTextMap[status]
      },
      roleTypeFilter(name) {
        const roleTypeMap = { 'ADMIN': '', 'TEACHER': 'success', 'STUDENT': 'warning' }
        return roleTypeMap[name]
      }
    },
    data() {
      return {
        userList: null,
        listLoading: true,
        roles: [],
        searchForm: {
          username: '',
          email: '',
          // 分页
          currentPage: 1,
          pageSize: 20,
          total: 0
        },
        searchLoading: false,
        multipleSelection: [],
        // 子组件使用
        insertVisible: false,
        updateVisible: false,
        userId: null
      }
    },
    created() {
      this.listUserHandle()
    },
    methods: {
      listUserHandle() {
        this.listLoading = true
        this.AjaxUtils.get('/user/listUser', this.searchForm).then((response) => {
          this.userList = response.data
          this.roles = response.data.roles
          this.listLoading = false
          this.searchLoading = false
          // 分页
          this.searchForm.total = response.total
        }).catch(() => {
          this.listLoading = false
          this.searchLoading = false
        })
      },
      searchUserHandle() {
        this.searchLoading = true
        this.searchForm.currentPage = 1
        this.searchForm.pageSize = 20
        this.listUserHandle()
      },
      handleSizeChange(val) {
        this.searchForm.pageSize = val
        this.listUserHandle()
      },
      handleCurrentChange(val) {
        this.searchForm.currentPage = val
        this.listUserHandle()
      },
      selectionChangeHandle(val) {
        this.multipleSelection = val
      },
      insertHandle() {
        this.insertVisible = true
      },
      updateHandle(row) {
        this.updateVisible = true
        this.userId = row.id
      },
      deleteHandle(row) {
        console.log(this.multipleSelection)
        this.ComponentUtils.confirm().then(() => {
          console.log(`要删除的id为${row.id}`)
        }).catch(() => {
        })
      }
    }
  }
</script>

<style lang="scss" scoped>
  .table-expand {
    font-size: 0;

    label {
      width: 90px;
      color: #99a9bf;
    }

    .el-form-item {
      margin-right: 0;
      margin-bottom: 0;
      width: 50%;
    }
  }

  .el-pagination {
    padding: 10px 0 0 0;
  }
</style>
